<script setup>
import { ref, onMounted, onUnmounted, nextTick } from 'vue';
import { RouterLink, useRouter } from 'vue-router';

const router = useRouter();
const loginModalVisible = ref(false);
const registerModalVisible = ref(false);
const navHeight = ref(0); // 导航栏高度

// 导航栏滚动效果
onMounted(() => {
  window.addEventListener('scroll', handleScroll);
  
  // 计算导航栏高度
  nextTick(() => {
    const nav = document.querySelector('nav');
    if (nav) {
      navHeight.value = nav.offsetHeight;
    }
  });
});

onUnmounted(() => {
  window.removeEventListener('scroll', handleScroll);
});

const handleScroll = () => {
  const nav = document.querySelector('nav');
  if (window.scrollY > 50) {
    nav.classList.add('bg-dark/90', 'backdrop-blur-md', 'shadow-lg');
    nav.classList.remove('bg-transparent');
  } else {
    nav.classList.remove('bg-dark/90', 'backdrop-blur-md', 'shadow-lg');
    nav.classList.add('bg-transparent');
  }
};

// 模态框控制
const openLoginModal = () => {
  loginModalVisible.value = true;
  registerModalVisible.value = false;
  document.body.style.overflow = 'hidden';
};

const openRegisterModal = () => {
  registerModalVisible.value = true;
  loginModalVisible.value = false;
  document.body.style.overflow = 'hidden';
};

const closeLoginModal = () => {
  loginModalVisible.value = false;
  document.body.style.overflow = 'auto';
};

const closeRegisterModal = () => {
  registerModalVisible.value = false;
  document.body.style.overflow = 'auto';
};

const switchToLogin = () => {
  registerModalVisible.value = false;
  loginModalVisible.value = true;
};

const switchToRegister = () => {
  loginModalVisible.value = false;
  registerModalVisible.value = true;
};

// 表单提交处理
const handleLoginSubmit = (e) => {
  e.preventDefault();
  // 这里添加登录逻辑
  alert('登录成功！');
  closeLoginModal();
};

const handleRegisterSubmit = (e) => {
  e.preventDefault();
  // 这里添加注册逻辑
  alert('注册成功！');
  closeRegisterModal();
};

// 跳转到登录页
const goToLogPage = () => {
  router.push('/log');
};
</script>

<template>
  <div>
    <!-- 导航栏占位符，防止内容被遮挡 -->
    <div class="nav-placeholder" :style="{ height: navHeight + 'px' }"></div>
    
    <!-- 导航栏 -->
    <nav class="fixed top-0 left-0 right-0 z-50 bg-transparent transition-all duration-300">
      <div class="px-4 py-4 flex justify-between items-center w-full">
        <!-- Logo -->
        <RouterLink to="/" class="text-2xl font-bold text-white text-shadow">
          <i class="fa fa-paper-plane mr-2"></i>校友行
        </RouterLink>
        
        <!-- 导航菜单 -->
        <div class="flex items-center space-x-4">
          <!-- 会员中心链接 -->
          <RouterLink to="/member" class="px-6 py-2 rounded-full border-2 border-primary text-dark hover:bg-primary/10 font-medium transition-all duration-300">
            <i class="fa fa-diamond mr-1"></i>会员中心
          </RouterLink>
          <!-- 登录/注册按钮 -->
          <button @click="openLoginModal" class="px-6 py-2 rounded-full border-2 border-primary text-dark hover:bg-primary/10 font-medium transition-all duration-300">
            登录
          </button>
          <button @click="openRegisterModal" class="px-6 py-2 rounded-full border-2 border-primary text-dark hover:bg-primary/10 font-medium transition-all duration-300">
            注册
          </button>
        </div>
      </div>
    </nav>

    <!-- 登录模态框 -->
    <div v-if="loginModalVisible" id="loginModal" class="fixed inset-0 z-50 flex items-center justify-center bg-dark/80 backdrop-blur-sm" @click="closeLoginModal">
      <div class="bg-white rounded-2xl shadow-2xl w-full max-w-md overflow-hidden transform transition-all hover-scale" @click.stop>
        <div class="p-6">
          <div class="flex justify-between items-center mb-6">
            <h2 class="text-2xl font-bold text-dark">登录</h2>
            <button @click="closeLoginModal" class="text-gray-500 hover:text-gray-700">
              <i class="fa fa-times text-xl"></i>
            </button>
          </div>
          
          <form @submit="handleLoginSubmit" class="space-y-4">
            <div>
              <label for="email" class="block text-sm font-medium text-gray-700 mb-1">邮箱</label>
              <div class="relative">
                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                  <i class="fa fa-envelope text-gray-400"></i>
                </div>
                <input type="email" id="email" name="email" class="w-full pl-10 pr-3 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-orange-500 transition-all outline-none" placeholder="请输入您的邮箱">
              </div>
            </div>
            
            <div>
              <label for="password" class="block text-sm font-medium text-gray-700 mb-1">密码</label>
              <div class="relative">
                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                  <i class="fa fa-lock text-gray-400"></i>
                </div>
                <input type="password" id="password" name="password" class="w-full pl-10 pr-3 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-orange-500 transition-all outline-none" placeholder="请输入您的密码">
              </div>
            </div>
            
            <div class="flex items-center justify-between">
              <div class="flex items-center">
                <input type="checkbox" id="remember" name="remember" class="h-4 w-4 text-orange-500 border-gray-300 rounded focus:ring-orange-500">
                <label for="remember" class="ml-2 block text-sm text-gray-700">记住我</label>
              </div>
              <a href="#" class="text-sm font-medium text-orange-500 hover:text-orange-600">忘记密码?</a>
            </div>
            
            <button type="submit" class="w-full bg-orange-500 hover:bg-orange-600 text-white font-medium py-3 px-4 rounded-lg transition-all duration-300 shadow-md hover-scale">
              登录
            </button>
          </form>
          
          <div class="mt-6">
            <p class="text-center text-sm text-gray-600 mb-4">其他登录方式</p>
            <div class="flex justify-center space-x-4">
              <button class="w-12 h-12 rounded-full bg-[#07C160] text-white flex items-center justify-center transition-all hover:bg-[#07C160]/90 hover-scale">
                <i class="fa fa-weixin text-xl"></i>
              </button>
              <button class="w-12 h-12 rounded-full bg-[#12B7F5] text-white flex items-center justify-center transition-all hover:bg-[#12B7F5]/90 hover-scale">
                <i class="fa fa-qq text-xl"></i>
              </button>
              <button class="w-12 h-12 rounded-full bg-[#E60012] text-white flex items-center justify-center transition-all hover:bg-[#E60012]/90 hover-scale">
                <i class="fa fa-weibo text-xl"></i>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 注册模态框 -->
    <div v-if="registerModalVisible" id="registerModal" class="fixed inset-0 z-50 flex items-center justify-center bg-dark/80 backdrop-blur-sm" @click="closeRegisterModal">
      <div class="bg-white rounded-2xl shadow-2xl w-full max-w-md overflow-hidden transform transition-all hover-scale" @click.stop>
        <div class="p-6">
          <div class="flex justify-between items-center mb-6">
            <h2 class="text-2xl font-bold text-dark">注册</h2>
            <button @click="closeRegisterModal" class="text-gray-500 hover:text-gray-700">
              <i class="fa fa-times text-xl"></i>
            </button>
          </div>
          
          <form @submit="handleRegisterSubmit" class="space-y-4">
            <div>
              <label for="regEmail" class="block text-sm font-medium text-gray-700 mb-1">邮箱</label>
              <div class="relative">
                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                  <i class="fa fa-envelope text-gray-400"></i>
                </div>
                <input type="email" id="regEmail" name="regEmail" class="w-full pl-10 pr-3 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-orange-500 transition-all outline-none" placeholder="请输入您的邮箱">
              </div>
            </div>
            
            <div>
              <label for="regPhone" class="block text-sm font-medium text-gray-700 mb-1">手机号</label>
              <div class="relative">
                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                  <i class="fa fa-mobile text-gray-400"></i>
                </div>
                <input type="tel" id="regPhone" name="regPhone" class="w-full pl-10 pr-3 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-orange-500 transition-all outline-none" placeholder="请输入您的手机号">
              </div>
            </div>
            
            <div>
              <label for="regPassword" class="block text-sm font-medium text-gray-700 mb-1">密码</label>
              <div class="relative">
                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                  <i class="fa fa-lock text-gray-400"></i>
                </div>
                <input type="password" id="regPassword" name="regPassword" class="w-full pl-10 pr-3 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-orange-500 transition-all outline-none" placeholder="请设置6-20位密码">
              </div>
            </div>
            
            <button type="submit" class="w-full bg-orange-500 hover:bg-orange-600 text-white font-medium py-3 px-4 rounded-lg transition-all duration-300 shadow-md hover-scale">
              注册
            </button>
          </form>
          
          <div class="mt-4 text-center">
            <p class="text-sm text-gray-600">
              已有账号？<button @click="switchToLogin" class="font-medium text-orange-500 hover:text-orange-600">立即登录</button>
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style>
/* 导入Font Awesome */
@import url('https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css');
</style>

<style scoped>

/* 自定义工具类 */
@layer utilities {
  .content-auto {
    content-visibility: auto;
  }
  .text-shadow {
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
  }
  .bg-blur {
    backdrop-filter: blur(8px);
  }
  .hover-scale {
    transition: transform 0.3s ease;
  }
  .hover-scale:hover {
    transform: scale(1.03);
  }
}



/* 自定义颜色变量 */
:root {
  --primary: #FF7A45;
  --secondary: #40A9FF;
  --tertiary: #52C41A;
  --dark: #1F2937;
  --light: #F9FAFB;
  --orange-500: #FF9F43;
  --orange-600: #FF8C00;
}

/* 应用颜色 */
.bg-primary {
  background-color: var(--primary);
}

.bg-secondary {
  background-color: var(--secondary);
}

.bg-tertiary {
  background-color: var(--tertiary);
}

.bg-dark {
  background-color: var(--dark);
}

.bg-light {
  background-color: var(--light);
}

.bg-orange-500 {
  background-color: var(--orange-500);
}

.bg-orange-600 {
  background-color: var(--orange-600);
}

.bg-orange-500\/20 {
  background-color: rgba(255, 159, 67, 0.2);
}

.bg-orange-500\/30 {
  background-color: rgba(255, 159, 67, 0.3);
}

.text-primary {
  color: var(--primary);
}

.text-secondary {
  color: var(--secondary);
}

.text-tertiary {
  color: var(--tertiary);
}

.text-dark {
  color: var(--dark);
}

.text-light {
  color: var(--light);
}

.text-orange-500 {
  color: var(--orange-500);
}

.text-orange-600 {
  color: var(--orange-600);
}

/* 焦点样式 */
.focus\:ring-orange-500 {
  --tw-ring-color: var(--orange-500);
}

.focus\:border-orange-500 {
  border-color: var(--orange-500);
}

/* 过渡动画 */
.transition-all {
  transition: all 0.3s ease;
}

.duration-300 {
  transition-duration: 300ms;
}

/* 轮播过渡效果 */
.transition-opacity {
  transition-property: opacity;
}

.duration-1000 {
  transition-duration: 1000ms;
}

.ease-in-out {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.opacity-0 {
  opacity: 0;
}

.opacity-100 {
  opacity: 1;
}
</style>